import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';

/**
 * Badge徽章组件
 * @element zss-badge
 */
@customElement('zss-badge')
export class ZssBadge extends LitElement {
  static styles = css`
    :host {
      display: inline-block;
      position: relative;
    }

    .badge {
      position: absolute;
      top: 0;
      right: 0;
      transform: translate(50%, -50%);
      z-index: 10;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 16px;
      height: 16px;
      padding: 0 4px;
      font-size: 10px;
      font-weight: 600;
      line-height: 1;
      white-space: nowrap;
      border-radius: 8px;
      border: 1px solid var(--zss-bg-color);
      box-sizing: border-box;
    }

    .badge-content {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* 类型样式 */
    .badge.primary {
      background-color: var(--zss-color-primary);
      color: var(--zss-bg-color);
    }

    .badge.success {
      background-color: var(--zss-color-success);
      color: var(--zss-bg-color);
    }

    .badge.warning {
      background-color: var(--zss-color-warning);
      color: var(--zss-bg-color);
    }

    .badge.danger {
      background-color: var(--zss-color-danger);
      color: var(--zss-bg-color);
    }

    .badge.info {
      background-color: var(--zss-color-info);
      color: var(--zss-bg-color);
    }

    /* 点状徽章 */
    .badge.dot {
      min-width: 8px;
      height: 8px;
      padding: 0;
      border-radius: 50%;
    }

    /* 独立徽章 */
    :host([is-dot]) .badge {
      position: static;
      transform: none;
      margin-left: 8px;
    }

    /* 最大值显示 */
    .badge.max-exceeded .badge-content::after {
      content: '+';
      margin-left: 1px;
    }

    /* 尺寸 */
    .badge.small {
      min-width: 12px;
      height: 12px;
      font-size: 8px;
      border-radius: 6px;
    }

    .badge.small.dot {
      min-width: 6px;
      height: 6px;
    }

    .badge.large {
      min-width: 20px;
      height: 20px;
      font-size: 12px;
      border-radius: 10px;
    }

    .badge.large.dot {
      min-width: 10px;
      height: 10px;
    }

    /* 隐藏徽章 */
    .badge.hidden {
      display: none;
    }

    /* 自定义颜色 */
    .badge.custom-color {
      background-color: var(--custom-color);
      color: var(--custom-text-color, var(--zss-bg-color));
    }

    /* 徽章位置 */
    .badge.top-left {
      top: 0;
      left: 0;
      right: auto;
      transform: translate(-50%, -50%);
    }

    .badge.bottom-right {
      top: auto;
      bottom: 0;
      right: 0;
      transform: translate(50%, 50%);
    }

    .badge.bottom-left {
      top: auto;
      bottom: 0;
      left: 0;
      right: auto;
      transform: translate(-50%, 50%);
    }

    /* 独立徽章位置 */
    :host([is-dot]) .badge.top-left {
      margin-left: 0;
      margin-right: 8px;
    }

    :host([is-dot]) .badge.bottom-right {
      margin-left: 8px;
    }

    :host([is-dot]) .badge.bottom-left {
      margin-left: 0;
      margin-right: 8px;
    }
  `;

  /**
   * 徽章值
   * @attr value
   */
  @property({ type: [String, Number] })
  value: string | number = '';

  /**
   * 最大值，超过最大值会显示 {max}+
   * @attr max
   */
  @property({ type: Number })
  max = 99;

  /**
   * 是否显示为点
   * @attr is-dot
   */
  @property({ type: Boolean })
  isDot = false;

  /**
   * 是否隐藏徽章
   * @attr hidden
   */
  @property({ type: Boolean })
  hidden = false;

  /**
   * 徽章类型
   * @attr type
   */
  @property({ type: String })
  type: 'primary' | 'success' | 'warning' | 'danger' | 'info' = 'primary';

  /**
   * 尺寸
   * @attr size
   */
  @property({ type: String })
  size: 'small' | 'default' | 'large' = 'default';

  /**
   * 徽章位置
   * @attr placement
   */
  @property({ type: String })
  placement: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' = 'top-right';

  /**
   * 是否独立显示
   * @attr is-independent
   */
  @property({ type: Boolean })
  isIndependent = false;

  /**
   * 徽章颜色
   * @attr color
   */
  @property({ type: String })
  color = '';

  /**
   * 徽章文字颜色
   * @attr text-color
   */
  @property({ type: String })
  textColor = '';

  private getDisplayValue(): string {
    if (this.isDot) return '';
    
    const numValue = Number(this.value);
    if (isNaN(numValue)) return String(this.value);
    
    if (numValue > this.max) {
      return `${this.max}`;
    }
    
    return String(numValue);
  }

  private shouldShowPlus(): boolean {
    if (this.isDot) return false;
    
    const numValue = Number(this.value);
    return !isNaN(numValue) && numValue > this.max;
  }

  private getBadgeClasses(): string {
    const classes = [
      'badge',
      this.type,
      this.size,
      this.isDot ? 'dot' : '',
      this.hidden ? 'hidden' : '',
      this.shouldShowPlus() ? 'max-exceeded' : '',
      this.placement,
      this.color ? 'custom-color' : ''
    ].filter(Boolean).join(' ');

    return classes;
  }

  private getBadgeStyle(): string {
    const style = {
      '--custom-color': this.color || '',
      '--custom-text-color': this.textColor || ''
    };

    return Object.entries(style)
      .filter(([_, value]) => value)
      .map(([key, value]) => `${key}: ${value}`)
      .join('; ');
  }

  render() {
    const badgeClasses = this.getBadgeClasses();
    const badgeStyle = this.getBadgeStyle();
    const displayValue = this.getDisplayValue();
    const showPlus = this.shouldShowPlus();

    return html`
      <slot></slot>
      ${!this.isIndependent ? html`
        <div class=${badgeClasses} style=${badgeStyle}>
          <div class="badge-content">
            ${displayValue}
            ${showPlus ? '+' : ''}
          </div>
        </div>
      ` : html`
        <div class=${badgeClasses} style=${badgeStyle}>
          <div class="badge-content">
            ${displayValue}
            ${showPlus ? '+' : ''}
          </div>
        </div>
      `}
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'zss-badge': ZssBadge;
  }
}